<template>
    <view class="main_view">
      <view v-for="(item,index) in data" :key="index" class="item_view">
        <view v-for="(user, index) in user_list" :key="index" :v-if="user._id === item.user_id" class="user_view">
          <image :src="user.img" mode="aspectFit" style="width: 10vw; height: 10vw;border-radius: 50%;" />
          <view style="margin-left: 10px;">{{ user.name }}</view>
        </view>
        <view style="margin-top: 5px;">{{ item.title }}</view>
      </view>
      <view class="add_btn" @click="()=>{go_to_ReleaseData()}">
        <img src="/src/icon/add.png"  alt="">
      </view>
    </view>
  </template>
<script setup>
import { ref,onMounted } from 'vue'
import axios from 'axios' 
const data = ref([])
const user_list = ref([])
const getData = () => {
  axios.get('http://localhost:3000/fk_list').then(res => {
    data.value = res.data.data
    console.log(data.value)
  })
}
const get_user_list = () =>{
  axios.get('http://localhost:3000/user_list').then(res => {
    user_list.value = res.data.data
})
}

const go_to_ReleaseData = () => {
  uni.navigateTo({
    url: '/pages/Feedback/ReleaseData'
  })
}
onMounted(()=>{
  getData()
  get_user_list()
})
</script>
<style scoped>
.main_view{
  width: 100vw;
  height: 94vh;
  background-color: #1c1526;
  padding-top: 8vh;
}
.item_view{
  width: 90vw;
  padding: 5vw;
  background-color: #51336c;
  color: white;
  box-sizing: border-box;
  margin: 5vw auto;
}
.add_btn{
  width: 8vw;
  height: 8vw;
  background-color: orange;
  position: absolute;
  right: 5vw;
  bottom: 10vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.add_btn img{
  width: 6vw;
  height: 6vw;

}
.user_view{
  display: flex;
  align-items: center;
}
</style>